<script lang="ts" setup>
import WaterIntakeCom from '@/components/homeEcharts/WaterIntakeCom.vue';
</script>


<template>
    <div class="home-total">
        <div class=" total-title">
            <div class="title">
                <span>汇总看板</span>
            </div>
            <div class="content">
                <div
                    style="font-size: 14px; color: #fff;width: 208px;height: 130px;background-color: #58a3f7; text-align: center; line-height: 25px; border-radius: 10px;">
                    <p style="position: relative;left: -70px;"> <el-image
                            style="position: absolute;top: 10px; right: 125px; z-index: 99; "
                            src="https://img.axureshop.com/c9/57/1d/c9571de2aa7c47d2865ef6311a990b6a/images/%E9%A6%96%E9%A1%B5%E6%80%BB%E8%A7%88/u746.png"></el-image>
                        <span>原水</span>
                    </p>
                    <p>今日取水量：84,312.3m³</p>
                    <p>今日保库：364kt</p>
                    <p>今日采样合格率：75%</p>
                </div>
                <div
                    style="font-size: 14px; color: #fff;width: 208px;height: 130px;background-color: #f3c03d; text-align: center; line-height: 25px; border-radius: 10px;">
                    <p style="position: relative;left: -70px;"> <el-image
                            style="position: absolute;top: 10px; right: 125px; z-index: 99; "
                            src="https://img.axureshop.com/c9/57/1d/c9571de2aa7c47d2865ef6311a990b6a/images/%E9%A6%96%E9%A1%B5%E6%80%BB%E8%A7%88/u746.png"></el-image>
                        <span>水厂</span>
                    </p>
                    <p>今日供水量：538.2kt</p>
                    <p>今日能耗：6,262.1kW·h</p>
                    <p>今日药耗：516.0kg</p>
                </div>
                <div
                    style="font-size: 14px; color: #fff;width: 208px;height: 130px;background-color: #52c1f5; text-align: center; line-height: 25px; border-radius: 10px;">
                    <p style="position: relative;left: -70px;"> <el-image
                            style="position: absolute;top: 10px; right: 125px; z-index: 99; "
                            src="https://img.axureshop.com/c9/57/1d/c9571de2aa7c47d2865ef6311a990b6a/images/%E9%A6%96%E9%A1%B5%E6%80%BB%E8%A7%88/u746.png"></el-image>
                        <span>管网</span>
                    </p>
                    <p>压力合格率：82%</p>
                    <p>管网检漏合格率：85%</p>
                    <p>管道长度：476.5km</p>
                </div>
                <div
                    style="font-size: 14px; color: #fff;width: 208px;height: 130px;background-color: #8167f5; text-align: center; line-height: 25px; border-radius: 10px;">
                    <p style="position: relative;left: -70px;"> <el-image
                            style="position: absolute;top: 10px; right: 125px; z-index: 99; "
                            src="https://img.axureshop.com/c9/57/1d/c9571de2aa7c47d2865ef6311a990b6a/images/%E9%A6%96%E9%A1%B5%E6%80%BB%E8%A7%88/u746.png"></el-image>
                        <span style="margin-left: 25px;">二次供水</span>
                    </p>
                    <p>泵房托管率：88%</p>
                    <p>泵房在线数：579</p>
                    <p>水质达标率：89%</p>
                </div>
                <div
                    style="font-size: 14px; color: #fff;width: 208px;height: 130px;background-color: #fb6260; text-align: center; line-height: 25px; border-radius: 10px;">
                    <p style="position: relative;left: -70px;"> <el-image
                            style="position: absolute;top: 10px; right: 125px; z-index: 99; "
                            src="https://img.axureshop.com/c9/57/1d/c9571de2aa7c47d2865ef6311a990b6a/images/%E9%A6%96%E9%A1%B5%E6%80%BB%E8%A7%88/u746.png"></el-image>
                        <span>预警</span>
                    </p>
                    <p>水质报警：17</p>
                    <p>设备报警：2</p>
                    <p>闯入报警：1</p>
                    <p>超压报警：3</p>
                </div>
            </div>
        </div>

        <div class="total-content">
            <div class="left">
                <div class="title">
                    <span>原水情况</span>
                </div>
                <div class="echarts">
                    <PassCom />
                    <WaterQualityCom />
                </div>
                <WaterIntakeCom />

            </div>
            <div class="right">
                <div class="title">
                    <span>预警</span>
                    <div class="marquee-text">
                        <p>2019年4月16日 23:5:23 四水厂 防雷系统s数2019年4月15日 12:21:52 福古水厂 3# 暗漏检修</p>
                        <p>2019年4月16日 23:5:23 四水厂 防雷系统s数2019年4月15日 12:21:52 福古水厂 3# 暗漏检修</p>
                        <p>2019年4月16日 23:5:23 四水厂 防雷系统s数2019年4月15日 12:21:52 福古水厂 3# 暗漏检修</p>
                    </div>

                    <div class="dargen">
                        <el-image style="width: 30px;height: 28px; position: relative; top: 13px;"
                            src="https://img.axureshop.com/c9/57/1d/c9571de2aa7c47d2865ef6311a990b6a/images/%E9%A6%96%E9%A1%B5%E6%80%BB%E8%A7%88/u461.png"></el-image>
                        <span>危险警报</span>
                        <span>2</span>
                        <span>29%</span>
                    </div>
                    <div class="waring">
                        <el-image style="width: 30px;height: 28px; position: relative; top: 13px;"
                            src="https://img.axureshop.com/c9/57/1d/c9571de2aa7c47d2865ef6311a990b6a/images/%E9%A6%96%E9%A1%B5%E6%80%BB%E8%A7%88/u702.png"></el-image>
                        <span>一般警报</span>
                        <span>5</span>
                        <span>71%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<style lang="scss" scoped>
.home-total {
    width: 100%;
    height: 100%;

    .total-title {
        width: 100%;
        height: 232px;
        margin: 0 auto;
        background-color: white;

        .title {
            width: 100%;
            height: 60px;
            line-height: 60px;
            border-bottom: 1px solid #999;


            span {
                color: #666;
                margin-left: 20px;
            }
        }

        .content {
            width: 100%;
            height: 182px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
    }


    .total-content {
        width: 100%;
        height: 650px;

        margin-top: 10px;
        display: flex;
        justify-content: space-between;

        .left {
            width: 64%;
            height: 100%;
            background-color: white;

            .echarts {
                display: flex;
                justify-content: space-between;
            }

            .title {
                width: 100%;
                height: 60px;
                line-height: 60px;
                border-bottom: 1px solid #999;


                span {
                    color: #666;
                    margin-left: 20px;
                }
            }


        }

        .right {
            width: 35%;
            height: 100%;
            background-color: white;


            .title {
                width: 100%;
                height: 60px;
                line-height: 60px;
                border-bottom: 1px solid #999;


                span {
                    color: #666;
                    margin-left: 20px;
                }
            }

            .marquee-text {
                width: 90%;
                text-align: center;
                height: 100px;
                margin-left: 20px;
                color: #666;
                font-size: 14px;
                display: inline-block;
                animation: p 5s linear infinite;
                overflow: hidden;
            }

            @keyframes p {
                0% {
                    transform: translateY(100%);
                }

                100% {
                    transform: translateXY(-100%);
                }
            }

            .dargen {
                width: 50%;
                display: flex;
                justify-content: space-around;
                margin: 0 auto;
                margin-top: 200px;
            }

            .waring {
                width: 50%;
                display: flex;
                justify-content: space-around;
                margin: 0 auto;
            }


        }
    }



}
</style>